<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>WebSocket UDP 数据接收测试</title>
</head>
<body>
    <h1>WebSocket UDP 数据接收测试</h1>
    <input type="text" id="message" placeholder="Enter message">
    <button onclick="sendMessage()">Send</button>
    <div id="output"></div>
    <script>
        const output = document.getElementById('output');
        const ws = new WebSocket('ws://127.0.0.1:8000');
        
        ws.onopen = function() {
            output.innerHTML += '<p>已连接到 WebSocket 服务器</p>';
        };
        
        ws.onmessage = function(event) {
            // 处理二进制数据
            if (event.data instanceof Blob) {
                const reader = new FileReader();
                reader.onload = function() {
                    const arrayBuffer = reader.result;
                    const uint8Array = new Uint8Array(arrayBuffer);
                    output.innerHTML += `<p>收到 UDP 数据: ${Array.from(uint8Array).map(b => b.toString(16).padStart(2, '0')).join(' ')}</p>`;
                };
                reader.readAsArrayBuffer(event.data);
            } else {
                output.innerHTML += `<p>收到文本数据: ${event.data}</p>`;
            }
        };
        
        ws.onclose = function() {
            output.innerHTML += '<p>WebSocket 连接已关闭</p>';
        };
        
        function sendMessage() {
            var message = document.getElementById("message").value;
            ws.send(message);
    	}
        ws.onerror = function(error) {
            output.innerHTML += `<p>WebSocket 错误: ${error}</p>`;
        };
    </script>
</body>
</html>
